<template>
	  <view class="historicalView">
	    <view class="box_title">最近搜过</view>
	    <view class="box_list">
	      <ul>
	        <li v-for="(item, index) in HistoricalRearch" :key="index"
	         @click="$emit('search-value',item)"
	        >
	          <image src="../../static/ic_search_history.png" />
	          <text>{{ item }}</text>
	        </li>
	      </ul>
	      <view class="detaleAll" @click="$emit('detale-all')">
	        <image src="../../static/ic_trash.png" />
	        <text>清空历史记录</text>
	      </view>
	    </view>
	  </view>
</template>

<script>
	export default {
	 props: ["HistoricalRearch"],
		name:"SearchHistorical",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
.historicalView {
  margin: 20px 0;
  font-size: 14px;
  .box_title {
    padding: 10px 15px;
    text-align: left;
    color: #999999;
  }
  .box_list {
    background: white;
    padding:5px 15px;
    ul {
		padding: 0;
      li {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        image {
          width: 25px;
          height: 25px;
          transform: scale(1.8);
        }
        text {
          text-align: left;
          flex: 1;
          margin-left: 10px;
          padding: 10px 0;
          border-bottom:1px solid #ededed;
        }
      }
    }
    .detaleAll {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 5px;
      color: #999999;
      image {
        width: 30px;
        height: 30px;
        transform: scale(1.5);
      }
    }
  }
}
</style>
